<template>
	<view>
		<tanchus type="shar" :show='show' :mask-click="true" @change="change">
			<view class="shiaxuansss_con">
				<view class="shaixuan_content">
					<view v-for="(item,index) in tabList" :key="index">
						<view class="shaixuan_title">
							{{item.name}}
						</view>
						<!-- style="display: flex;justify-content: space-between;" -->
						<view class="shaixuan_list" v-if="item.type==0" >
							<view class="shaixuan_list_zhi zhonglei" style="margin-right:0rpx"  v-for="(items,indexs) in item.list" :key="indexs"
								:class="{tab_ACT:indexs == item.state}" @click="tab_dianji(index,indexs)">{{items.name}}
							</view>
						</view>
						<view class="shaixuan_list" v-else>
							<view class="shaixuan_input_content" @click="openLevel()">
								<!-- @click="toggleSelector" -->
								<input class="shaixuan_input_input" type="text" placeholder="请选择拍摄城市"
									placeholder-class="index_placeholder" v-model="citys" disabled />
								<image src="/static/image/index/dizhi.png"></image>
							</view>
						</view>
					</view>


					<view class="shaixuan_bottom">
						<view @click='chongzhi'>重置</view>
						<view @click='queren(2)'>确认</view>
					</view>

				</view>

			</view>
			
			<level-linkage ref="levelLinkage"
				:pickerValueDefault="pickerValueDefault"
				@onConfirm="onConfirm"></level-linkage>
		</tanchus>

	</view>
</template>

<script>
	// import { base64ToPath, pathToBase64  } from '@/configure/image-tools.js';
	export default {
		data() {
			return {
				tabCurrent: 'tabNum1',
				tabCur: 0,
				tabList: [{
					name: '预计婚期',
					type: 0,
					state: 0,
					list: [{
							name: '全部',
							zhi:''
						},{
						name: '三个月内',
						zhi:''
					}, {
						name: '半年内',
						zhi:''
					}, {
						name: '一年内',
						zhi:''
					}, {
						name: '一年以上/婚期未定',
						zhi:''
					}, {
						name: '无',
						zhi:''
					}]
				}, {
					name: '拍摄城市',
					type: 1,
				}, {
					name: '拍摄种类',
					type: 0,
					state: 0,
					list: [{
						name: '全部'
					},{
						name: '婚纱摄影'
					}, {
						name: '婚纱礼服'
					}, {
						name: '婚礼策划'
					}, {
						name: '婚宴酒店'
					}]
				}, {
					name: '客资状态',
					type: 0,
					state: 0,
					list: [{
						name: '全部'
					},{
						name: '已领取'
					}, {
						name: '活动锁单'
					}, {
						name: '订单成交'
					},{
						name: '转让客资'
					},{
						name: '放弃客资'
					}, {
						name: '取消订单申请'
					}, {
						name: '取消订单成功'
					},{
						name: '取消订单失败'
					}, {
						name: '客户退单申请'
					}, {
						name: '客户退单成功'
					},{
						name: '客资退回失败'
					},{name:"取消活动锁单"}
					]
				}],
				citys:'',
				pickerValueDefault:[0, 0, 0],
				
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			state: {
				type: Number,
				default: 0
			},
			margin: {
				type: String,
				default: "0rpx"
			},
		},
		computed: {
			
		},
		onLoad() {},
		watch: {
			show(newValue) {
				// this.show = newValue;
				// if (newValue == true) {
				this.togglePopup('top', 'shar');
				// }
			},
		},
		mounted() {
			// this.haibao();
		},
		methods: {
			change(e) {
				let that=this;
				if(e.show==false){
					this.$emit('shaixuan',{
						states: 0,
						show:false,
						// name:
						
					})
				}
				
			},
			chongzhi(){
				this.tabList[0].state = 0;
				this.tabList[1].state = 1;
				this.tabList[2].state = 0;
				this.tabList[3].state = 0;
				// this.panduan()
			},
			togglePopup(type, open) {
				switch (type) {
					case 'top':
						break
					case 'bottom':
						break
					case 'center':
						break
				}
			},
			tab_dianji(index, indexs) {
				this.tabList[index].state = indexs;
			},
			// 地址框弹出
			openLevel(index) {
				this.$refs.levelLinkage.open();
			},
			queren(states) {
				this.$emit('shaixuan', {
					states: states,
					// this.citys假数据不需要传
					// sxtype:this.tabList[0].list[this.tabList[0].state].name +','+this.citys+','+this.tabList[2].list[this.tabList[2].state].name+','+this.tabList[3].list[this.tabList[3].state].name,
					sxtype:this.tabList[0].list[this.tabList[0].state].name+','+'' +','+this.tabList[2].list[this.tabList[2].state].name+','+this.tabList[3].list[this.tabList[3].state].name,
					show: false
				})
			},
			// 地址框点击确定
			onConfirm(e) {
				// console.log(e.firstPick.name)
				// console.log(e.secondPick.name)
				// e.name是全部地址省市区
				this.pickerValueDefault=e.value;
				this.citys=e.firstPick.name+e.secondPick.name;
			},
			dizhiname(longitude, latitude) {
				var that = this;
				this.jiekou.huoqudizhi({
					longitude: longitude,
					latitude: latitude,
					success: function(res) {
						// console.log('res')
						// console.log(res)
						that.citys =  res.addressComponent.city+'-'+res.addressComponent.district+'-'+res.addressComponent.township;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
		
	.shiaxuansss_con{
		background:#FFF;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		margin-top: calc( var(--status-bar-height) + 198rpx );
	}
	.shaixuan_content {
		width: calc(100% - 60rpx);
		margin: 0 auto;
		overflow: hidden;
		padding: 30rpx;
		padding-top: 50rpx;
		border-radius: 10rpx;
	}

	.shaixuan_title {
		font-size: 30rpx;
		color: $heise_ziti;
		border-left: 4rpx solid $zhuce_color;
		text-indent: 8rpx;
		font-weight: normal;
	}
	.zhonglei{
		margin:20rpx;
	}
	.shaixuan_list {
		margin: 24rpx 0rpx 40rpx 0rpx;
	}

	.shaixuan_list_zhi {
		display: inline-block;
		font-size: 26rpx;
		color: $qianhui_ziti;
	}

	.shaixuan_input_content {
		width: 420rpx;
		padding: 0rpx 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid $qianhui_eee;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
	}

	.shaixuan_input_input {
		width: calc(100% - 60rpx);
		margin-right: 30rpx;
		color: $zhuce_color;
		font-size: 26rpx;
	}

	.shaixuan_input_content image {
		width: 30rpx;
		height: 30rpx;
	}

	.shaixuan_input_placeholder {
		color: $zhuce_color;
		font-size: 26rpx;
	}

	.tab_ACT {
		color: $zhuce_color;
	}

	.shaixuan_bottom {
		border: 2rpx solid $zhuce_color;
		display: flex;
		justify-content: space-between;
		border-radius: 40rpx;
		background: $zhuce_color;
		margin: 40rpx 0rpx 20rpx 0rpx;
	}

	.shaixuan_bottom view {
		width: 50%;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.shaixuan_bottom view:nth-child(1) {
		color: $zhuce_color;
		background: $white_ziti;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
	}

	.shaixuan_bottom view:nth-child(2) {
		color: $white_ziti;
		border-radius: 0rpx 40rpx 40rpx 0rpx;
	}
</style>
